<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show all Users</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script>
    /**
     * 创立User Model
     */
    Ext.define('User',{
        extend:'Ext.data.Model',
        fields:[
            {name:'username',type:'string'},
            {name:'password',type:'string'},
            {name:'email',type:'string'},
        ]
    });

	/**
	 * 创建store容器储存json
	 */
	var userStore = Ext.create('Ext.data.Store',{
		model:User,
		proxy:{
			type:'ajax',
			url:'http://localhost:8080/user/selectAll.do',
			async:false,
			reader:{
				type:'json',
				root:'data'
			}
		},
		autoLoad:true
	});

	var userGrid = Ext.create('Ext.grid.Panel',{
		title:'用户列表',
		store: userStore,
		columns:[
			{header:'username',dataIndex:'username'},
			{header:'password',dataIndex:'password'},
			{header:'email',dataIndex:'email',flex : 1}
		],
		selType:'rowmodel',
		plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
	});
</script>
</body>
</html>